<template>
  <div>
    <div class="flex h-[280px]">
      <div class="flex-1 h-full">
        <psmReport-pie
          :id="`${activeTabs}_allTotal_pcm`"
          key="1_pcm"
          :title="
            params?.yearOrderTotalNumber?.name ?? `${year}年${month}月生成工单`
          "
          :params="params?.yearOrderTotalNumber?.data ?? []"
        />
      </div>
      <div class="flex-1 h-full">
        <psmReport-bar
          :id="`${activeTabs}_allClose_pcm`"
          key="3_pcm"
          :title="
            params?.yearOrderCloseRate?.name ?? `${year}年${month}月工单关闭率`
          "
          :params="params?.yearOrderCloseRate ?? {}"
        />
      </div>
      <div class="flex-1 h-full">
        <psmReport-pie
          :id="`${activeTabs}_allMonthCount_pcm`"
          key="3_pcm"
          :title="
            params?.monthOrderBuildNumber?.name ?? `${year}年${month}月生成工单`
          "
          :params="params?.monthOrderBuildNumber?.data ?? []"
        />
      </div>
      <div class="flex-1 h-full">
        <psmReport-pie
          :id="`${activeTabs}_allMonthClose_pcm`"
          key="4_pcm"
          :title="
            params?.monthOrderCloseNumber?.name ?? `${year}年${month}月关闭工单`
          "
          :params="params?.monthOrderCloseNumber?.data ?? []"
        />
      </div>
    </div>
    <el-divider />
    <div class="flex h-[280px]">
      <div class="flex-1 h-full">
        <psmReport-line
          :id="`${activeTabs}_yearTotal_pcm`"
          key="1_pcm"
          title="年度工单"
          :params="params?.yearOrderTrend ?? []"
        />
      </div>
      <div class="flex-1 h-full">
        <psmReport-line
          :id="`${activeTabs}_monthTotal_pcm`"
          key="2_pcm"
          title="月度工单"
          :params="params?.monthOrderTrend ?? []"
        />
      </div>
    </div>
    <el-divider />
    <div class="mb-[26px]">
      <pcmReport-table-year1 :params="params?.orderListByFrequency ?? []" />
    </div>
    <!-- <el-divider /> -->
    <pcmReport-table-year2 :params="params?.orderListByDealTime ?? []" />
  </div>
</template>

<script lang="ts" setup>
import { useDictionary } from "@/utils/useTable";

const props = defineProps({
  activeTabs: {
    type: String,
    default: () => {
      return "";
    },
  },
  year: {
    type: String,
    default: () => {
      return "";
    },
  },
  month: {
    type: String,
    default: () => {
      return "";
    },
  },
  type: {
    type: String,
    default: () => {
      return "";
    },
  },
  params: {
    type: Object,
    default: () => {
      return {
        monthOrderBuildNumber: null,
        monthOrderCloseNumber: null,
        monthOrderTrend: null,
        orderListByDealTime: null,
        orderListByFrequency: null,
        yearOrderCloseRate: null,
        yearOrderTotalNumber: null,
        yearOrderTrend: null,
      };
    },
  },
});
const { type, params, month, year, activeTabs } = toRefs(props);

const option = ref<any>();

watch(
  () => params.value,
  (newValue) => {},
  {
    deep: true,
    immediate: false,
  }
);

onMounted(() => {});
</script>

<style lang="scss" scoped>
:deep(.el-divider--horizontal) {
  margin: 7px 0;
}
</style>
